<script setup lang="ts" name="B48CustomRef">
/*
import { customRef } from "vue";
let initValue = "你好";
let t: number;
// track: 跟踪
// trigger：触发器
const msg = customRef((track, trigger) => {
  return {
    get() {
      // track：告诉vue，数据msg很重要，你要对其进行持续关注，一旦它发生变化就去更新
      track();
      return initValue;
    },
    set(v) {
      clearTimeout(t);
      t = setTimeout(() => {
        initValue = v;
        // trigger：通知vue，数据msg变化了
        trigger();
      }, 1000);
    },
  };
});
*/
import useMsgRef from "../hooks/useMsgRef";
const msg = useMsgRef("你好");
</script>
<template>
  <div class="border shadow my-6 p-6 bg-white container mx-auto max-w-3xl">
    <div>{{ msg }}</div>
    <div>
      <input class="border px-1 py-0.5 rounded block w-full" v-model="msg" />
    </div>
  </div>
</template>
